import { ref, computed } from 'vue'
import {
  createInput,
  createSelect,
  createSlot,
  commonRules,
  createDate,
  createEmpty,
} from '@/components/DynamicForm/config'

export const pageConfig = () => {
  const formConfig = {
    labelWidth: '90px',
    inline: true,
    keyup: true,
    buttonAlign: 'right',
    isSearch: true,
    buttons: [
      { text: '搜索', type: 'primary', action: 'submit' },
      { text: '重置', action: 'reset' },
    ],
  }
  const formItems = [
    createInput('当事人名称', 'partyName', {
      placeholder: '请输入当事人名称',
      style: { width: '220px' },
      props: {
        clearable: true,
      },
    }),
    createInput('立案号', 'caseNo', {
      placeholder: '请输入立案号',
      style: { width: '220px' },
      props: {
        clearable: true,
      },
    }),
    createSlot('记录时间', 'dateRange', {
      placeholder: '请输入记录时间',
      style: { width: '220px' },
    }),
  ]
  const columns = ref({
    caseNo: { label: '立案号', visible: true },
    partyName: { label: '当事人名称', visible: true },
    caseCause: { label: '案由', visible: true },
    onsiteName: { label: '被询问人员', visible: true },
    recordUserName: { label: '记录人', visible: true },
    createTime: { label: '记录时间', visible: true },
  })
  const newColumns = computed(() => [
    {
      type: 'selection',
      width: 55,
      align: 'center',
    },
    {
      type: 'index',
      label: '序号',
      width: 60,
      align: 'center',
      slots: {
        default: 'index',
      },
    },
    ...(columns.value.caseNo.visible
      ? [
          {
            label: '立案号',
            key: 'caseNo',
            prop: 'caseNo',
            align: 'center' as const,
            minWidth: 220,
          },
        ]
      : []),
    ...(columns.value.partyName.visible
      ? [
          {
            label: '当事人名称',
            key: 'partyName',
            prop: 'partyName',
            align: 'center' as const,
            minWidth: 220,
          },
        ]
      : []),
    ...(columns.value.caseCause.visible
      ? [
          {
            label: '案由',
            key: 'caseCause',
            prop: 'caseCause',
            align: 'center' as const,
            minWidth: 220,
          },
        ]
      : []),
    ...(columns.value.onsiteName.visible
      ? [
          {
            label: '被询问人员',
            key: 'onsiteName',
            prop: 'onsiteName',
            align: 'center' as const,
            minWidth: 180,
          },
        ]
      : []),
    ...(columns.value.recordUserName.visible
      ? [
          {
            label: '记录人',
            key: 'recordUserName',
            prop: 'recordUserName',
            align: 'center' as const,
            minWidth: 120,
          },
        ]
      : []),
    ...(columns.value.createTime.visible
      ? [
          {
            label: '记录时间',
            key: 'createTime',
            prop: 'createTime',
            align: 'center' as const,
            width: 160,
          },
        ]
      : []),
    {
      label: '操作',
      key: 'action',
      prop: 'action',
      width: 240,
      fixed: 'right' as const,
      align: 'center' as const,
      showOverflowTooltip: false,
      slots: {
        default: 'action',
      },
    },
  ])
  const formConfigDetail = {
    labelWidth: '120px',
    keyup: true,
    buttonAlign: 'right',
    isSearch: true,
    buttons: [],
  }
  const formItemsDetail = [
    createSlot('立案号', 'caseId', {
      placeholder: '请选择立案号',
      props: {
        formTitle: '调查询问笔录',
      },
      style: { width: '100%' },
      rules: [commonRules.required('立案号不能为空')],
    }),
    createSlot('时间', 'dateRange', {
      placeholder: '请选择时间',
      span: 10,
      style: { width: '100%' },
      rules: [commonRules.onlyDay],
    }),
    createSlot('地点', 'recordAddress', {
      slotName: 'recordAddress',
      span: 8,
      rules: [commonRules.required('地点不能为空')],
    }),
    createEmpty({ span: 16 }),
    createInput('询问人姓名', 'inspectorName1', {
      placeholder: '请输入询问人姓名',
      style: { width: '100%' },
      props: {
        clearable: true,
        disabled: true,
      },
      rules: [commonRules.required('询问人姓名不能为空')],
    }),
    createInput('执法证编号', 'inspectorCertNo1', {
      placeholder: '请输入执法证编号',
      style: { width: '100%' },
      props: {
        clearable: true,
        disabled: true,
      },
      rules: [commonRules.required('执法证编号不能为空')],
    }),
    createEmpty({ span: 8 }),
    createInput('询问人姓名', 'inspectorName2', {
      placeholder: '请输入询问人姓名',
      style: { width: '100%' },
      props: {
        clearable: true,
        disabled: true,
      },
      rules: [commonRules.required('询问人姓名不能为空')],
    }),
    createInput('执法证编号', 'inspectorCertNo2', {
      placeholder: '请输入执法证编号',
      style: { width: '100%' },
      props: {
        clearable: true,
        disabled: true,
      },
      rules: [commonRules.required('执法证编号不能为空')],
    }),
    createEmpty({ span: 8 }),
    // createInput('记录人', 'recordUserName', {
    //   placeholder: '请输入记录人',
    //   style: { width: '100%' },
    //   props: {
    //     clearable: true,
    //   },
    //   rules: [commonRules.required('记录人不能为空')],
    // }),
    createSlot('记录人', 'recorderId', {
      slotName: 'recorderId',
      rules: [commonRules.required('记录人不能为空')],
    }),
    createInput('执法证编号', 'recordEnforcementNo', {
      placeholder: '请输入执法证编号',
      style: { width: '100%' },
      props: {
        clearable: true,
      },
      rules: [commonRules.required('执法证编号不能为空')],
    }),
    createInput('工作单位', 'recordWorkUnit', {
      placeholder: '请输入工作单位',
      style: { width: '100%' },
      props: {
        clearable: true,
      },
      rules: [commonRules.required('工作单位不能为空')],
    }),
    createInput('被询问人姓名', 'onsiteName', {
      placeholder: '请输入被询问人姓名',
      style: { width: '100%' },
      props: {
        clearable: true,
      },
      rules: [commonRules.required('被询问人姓名不能为空')],
    }),
    createDate('出生日期', 'dateOfBirth', {
      placeholder: '请选择出生日期',
      style: { width: '100%' },
      props: {
        clearable: true,
      },
      rules: [commonRules.required('出生日期不能为空')],
    }),
    createSelect('性别', 'gender', {
      placeholder: '请选择性别',
      dictKey: 'sys_user_sex',
      props: {
        style: { width: '100%' },
      },
      rules: [commonRules.required('性别不能为空')],
    }),
    createInput('公民身份号码', 'idNumber', {
      placeholder: '请输入公民身份号码',
      style: { width: '100%' },
      props: {
        clearable: true,
      },
      rules: [commonRules.required('公民身份号码不能为空'), commonRules.identityCard18],
    }),
    createInput('电话', 'onsitePhone', {
      placeholder: '请输入电话',
      style: { width: '100%' },
      props: {
        clearable: true,
      },
      rules: [commonRules.required('电话不能为空'), commonRules.phone],
    }),
    createEmpty({ span: 8 }),
    createInput('工作单位', 'workUnit', {
      placeholder: '请输入工作单位',
      style: { width: '100%' },
      props: {
        clearable: true,
      },
      rules: [commonRules.required('工作单位不能为空')],
    }),
    createInput('职务', 'onsitePosition', {
      placeholder: '请输入职务',
      style: { width: '100%' },
      props: {
        clearable: true,
      },
      rules: [commonRules.required('职务不能为空')],
    }),
    createEmpty({ span: 8 }),
    createInput('邮编', 'postalCode', {
      placeholder: '请输入邮编',
      style: { width: '100%' },
      props: {
        clearable: true,
      },
      rules: [commonRules.postCode],
    }),
    createSlot('地点', 'streetOfAddress', {
      slotName: 'streetOfAddress',
      span: 10,
      rules: [commonRules.required('地点不能为空')],
    }),
    createSlot('', 'address', {
      slotName: 'address',
      span: 6,
      formItemProps: {
        labelWidth: '0px',
      },
      rules: [commonRules.required('详细地点不能为空')],
    }),
  ]

  return {
    formConfig,
    formItems,
    columns,
    newColumns,
    formConfigDetail,
    formItemsDetail,
  }
}
